<template>
    <div class="box" @scroll="scrollTop">
        <!-- 导航栏 -->
        <navList title="首页"></navList>

        <!-- 搜索栏 -->
        <van-search v-model="search" placeholder="请输入搜索关键词" @click="toSearch()" @update:model-value="onSearch" />

        <!-- tabs切换 -->
        <van-tabs :active="active" animated>
            <van-tab title="推荐">
                <!-- 轮播图 -->
                <swiper :images="images"></swiper>
                <!-- 倒计时 -->
                <div class="foot">
                    <van-count-down :time="time" @finish="onFinish" />
                    <van-grid :column-num="3" v-if="isShow">
                        <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
                    </van-grid>
                </div>
            </van-tab>
            <van-tab title="美食">
                <div style="height: 2rem;"></div>
                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <van-grid :border="false" :column-num="2">
                        <van-grid-item v-for="(v, i) in list" :key="i" @click="toDetail(v.goods_id)"
                            :style="i % 2 == 0 ? { height: '27rem' } : { height: '40rem' }">
                            <van-image
                                :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'" />
                            {{ v.goods_name }}
                            <div style="color: red;font-size: 22px;">${{ v.goods_price }}</div>
                        </van-grid-item>
                    </van-grid>
                </van-pull-refresh>
                <div style="height: 4rem;"></div>
            </van-tab>
            <van-tab title="运动">内容 3</van-tab>
            <van-tab title="保健品">内容 4</van-tab>
            <van-tab title="服饰">内容 4</van-tab>
            <van-tab title="更多">内容 4</van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue';

import navList from "@/components/navList.vue"
import swiper from "@/components/swiper.vue"

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

import { swiperdataApi, searchApi } from '@/api/api';

// 倒计时
const time = ref(30 * 1000);
let isShow = ref(true)
const onFinish = () => {
    isShow.value = false
};

let search = ref('')
let images = ref({})

const active = ref(1);

const swiperList = () => {
    swiperdataApi().then((res) => {
        // console.log(res)
        images.value = res.data.message
    })
}
swiperList()

// 搜索列表
const toSearch = () => {
    active.value = 1
}

let list = ref({})
const searchList = () => {
    searchApi(search.value).then((res) => {
        console.log(res)
        list.value = res.data.message.goods

        setTimeout(() => {
            document.querySelector(".box").scrollTop = localStorage.getItem("scrollTop2") * 1
        }, 200);
    })
}
searchList()

// 输入框的搜索
import _ from "lodash"
const onSearch = _.debounce((val) => {
    console.log(val)
    searchList()
}, 1000)

// 接收传递过来的参数
search.value = route.query.name
// console.log(search.value)

if (search.value) {
    searchList()
}

// 跳转到详情
const toDetail = (id) => {
    // console.log(123)
    router.push({ path: '/detail', query: { goods_id: id } })
}

const scrollTop = (e) => {
    // console.log(e.target.scrollTop)
    localStorage.setItem("scrollTop2", e.target.scrollTop)
}

// 下拉刷新
import { showToast } from 'vant';
const loading = ref(false);
const onRefresh = () => {
    searchList()
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
    }, 1000);
};

</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    overflow: auto;
}
</style>